<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>文件搜索页</title>
    <link rel="icon" type="image/x-icon" href="/images/logoRed.ico">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/style/admin.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/css/formSelects-v4.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/css/common.css}">
    <!--标签插件-->
    <link href="/static/css/materialdesignicons.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/js/jquery-tags-input/jquery.tagsinput.min.css">
    <link rel="stylesheet" th:href="@{/static/css/indexTwo.css}">
    <style type="text/css">
        .layui-table-cell {
            height: auto;
            line-height: 28px;
        }
        #head{
            border-bottom: 0;
            min-width: 1060px;
            padding: 0;
            margin: 0;
            width: 100%;
            /*position: absolute;*/
            z-index: 301;
            min-width: 1000px;
            background: #fff;
            border-bottom: 1px solid #ebebeb;
            /*position: fixed;*/
            _position: absolute;
            -webkit-transform: translateZ(0);
        }
        #resultLogo{
            float: left;
            margin: 17px 0 0;
        }
        #head_wrapper{
            height: 70px;
            padding-left: 60px;
        }
        .fm{
            margin: 15px 0 15px 16px;
            clear: none;
            float: left;
            position: relative;
            z-index: 297;
        }
    </style>
    <!-- end 标签插件   -->
</head>
<body>
<div id="head">
    <div id="head_wrapper">
        <a id="resultLogo" >
            <img src="/static/images/logoRed.png" style="width: 33px;height: 33px;">
        </a>
        <div class="fm layui-form">
                    <span class="s_ipt_wr">
                        <input id="searchText" name="KW" autocomplete="off" maxlength="100" placeholder="文件名/文件夹名/关键字" th:value="${searchText!=null ? searchText:''}">
                    </span>
            <span class="btn_wr s_btn_wr bg" id="s_btn_wr">
                        <input type="button" value="查找文件" id="query" class="btn self-btn bg s_btn" data-type="reload" lay-submit lay-filter="LAY-user-front-search">
            </span>
        </div>
    </div>
</div>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-row layui-col-space20">
                <div class="layui-col-md8">
                    <div class="layui-row grid-demo">
                        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                            <legend>文件列表</legend>
                        </fieldset>
                        <table class="layui-table" lay-skin="line" id="table1" lay-filter="table1">
                            <thead>
                                <tr>
                                    <th>类型</th>
                                    <th>名称/路径</th>
                                    <th>日期/大小</th>
                                </tr>
                            </thead>
                            <tbody class="fileList">

                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-row grid-demo grid-demo-bg1">
                        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                            <legend>文件夹列表</legend>
                        </fieldset>
                        <table class="layui-table" lay-skin="line" id="table2" lay-filter="table2">
                            <thead>
                                <tr>
                                    <th>类型</th>
                                    <th>名称/路径</th>
                                    <th>日期/大小</th>
                                </tr>
                            </thead>
                            <tbody class="floderList">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/static/layuiadmin/layui/layui.all.js}"></script>
<script th:src="@{/static/js/formSelects-v4.js}"></script>
<script th:src="@{/static/js/jquery.js}"></script>
<!--标签插件-->
<script type="text/javascript" th:src="@{/static/js/perfect-scrollbar.min.js}"></script>
<script type="text/javascript" th:src="@{/static/js/jquery-tags-input/jquery.tagsinput.min.js}"></script>
<script type="text/javascript" th:src="@{/static/js/main.min.js}"></script>
<!-- 渲染模板 -->
<script id="fileTpl" type="text/html">
    {{#  layui.each(d, function(index, item){ }}
        <tr>
            <td>
                {{# if(item.isImg==1){ }}
                    <img src="{{item.filePath}}"/>
                {{# }else{ }}
                    <img style="width:30px;height:30px;" src="/static/images/fti/{{item.fileExtension}}.png"/>
                {{# } }}
                <input type="hidden" name="fileId" value="{{item.fileId}}">
            </td>
            <td>
                <h2>{{item.fileName}}</h2><br/><h5>{{item.filePath}}</h5>
            </td>
            <td>
                <h4>{{item.modifyDate}}</h4><br/><h5>{{item.fileSizeMB}}MB</h5>
            </td>
        </tr>
    {{#  }); }}
    {{# if(d.length<=0){ }}
        <div class="list-empty">
            <i class="layui-icon layui-icon-face-surprised"></i>
            <div>没有文件</div>
        </div>
    {{# } }}
</script>
<!--end 渲染模板-->
<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['layer', 'table', 'element','form','util','upload','laydate'], function(){
        var  layer = layui.layer //弹层
            ,$ = layui.jquery
            ,table = layui.table //表格
            ,element = layui.element //元素操作
            ,form = layui.form
            ,laydate = layui.laydate
            ,util=layui.util
            ,laytpl = layui.laytpl
            ,upload=layui.upload;
        form.render('checkbox');
        // 渲染文件列表
        function renderList(searchTextarea) {
            searchTextarea = $('#searchText').val();
            layer.load(2);
            $.get('/getFileBySearch', {
                fileText: searchTextarea,
                isDir:0
            }, function (res) {
                layer.closeAll('loading');
                if (res.code === 200) {
                    laytpl(fileTpl.innerHTML).render(res.data, function (html) {
                        $('.fileList').html(html);
                    });
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            });
            $.get('/getFileBySearch', {
                fileText: searchTextarea,
                isDir:1
            }, function (res) {
                layer.closeAll('loading');
                if (res.code === 200) {
                    laytpl(fileTpl.innerHTML).render(res.data, function (html) {
                        $('.floderList').html(html);
                    });
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            });
        }
        //列表渲染
        renderList();

        //查询按钮单击事件
        $("#query").click(function () {
            renderList();
        });

        //键盘回车查询事件
        $('input').keydown(function (e) {
            if(e.key=="Enter") {
                //setFormListSubmit是要触发的事件
                renderList();
            }
        })

        $("#table1").on("click", "tr", function(i){
            //获取当前第一个td中的input（hidden）的值
            var fileId=$(this).find("td:first").find("input").val();
            if(fileId!=null && fileId !=''){
                var index=layer.open({
                    type: 2,
                    title: '文件信息',
                    maxmin: true,
                    shadeClose: true, //点击遮罩关闭层
                    area : ['1200px' , '960px'],
                    content: '/details.htm/'+fileId,
                    end:function(){

                    }
                });
            }
            // if( $(this).index() != $(this).parent().children().length - 1 ){
            //     window.location="newurl";
            // }
        })
        $("#table2").on("click", "tr", function(i){
            //获取当前第一个td中的input（hidden）的值
            var fileId=$(this).find("td:first").find("input").val();
            if(fileId!=null && fileId !=''){
                var index=layer.open({
                    type: 2,
                    title: '文件信息',
                    maxmin: true,
                    shadeClose: true, //点击遮罩关闭层
                    area : ['1200px' , '960px'],
                    content: '/folder.htm/'+fileId,
                    end:function(){

                    }
                });
            }
            // if( $(this).index() != $(this).parent().children().length - 1 ){
            //     window.location="newurl";
            // }
        })


        // //监听行单击事件（双击事件为：rowDouble）
        // table.on('row(table1)', function(obj){
        //     var data = obj.data;
        //     // layer.alert(JSON.stringify(data), {
        //     //     title: '当前行数据：'
        //     // });
        //     var index=layer.open({
        //         type: 2,
        //         title: '文件信息',
        //         maxmin: true,
        //         shadeClose: true, //点击遮罩关闭层
        //         area : ['1200px' , '960px'],
        //         content: 'details.htm/'+data.fileId,
        //         end:function(){
        //
        //         }
        //     });
        //     //layer.full(index);
        //     //标注选中样式
        //     obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
        // });
        // //监听行单击事件（双击事件为：rowDouble）
        // table.on('row(table2)', function(obj){
        //     var data = obj.data;
        //     var index=layer.open({
        //         type: 2,
        //         title: '文件夹信息',
        //         maxmin: true,
        //         shadeClose: true, //点击遮罩关闭层
        //         area : ['1200px' , '960px'],
        //         content: 'folder.htm/'+data.fileId,
        //         end:function(){
        //             //location.reload();//弹出层结束后，刷新主页面
        //         }
        //     });
        //     //layer.full(index);
        //     //标注选中样式
        //     obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
        // });
    });
</script>
</body>
</html>
